<template>
  <a-drawer
    :title="title"
    headerStyle="background-color: #FF943E"
    :maskStyle="{background: 'transparent'}"
    :maskClosable="false"
    :visible="dialog"
    width="500"
    @close="cancel"
  >
    <input type="text" v-model="title" class="change_btn"/>
    <div class="worksheet_trigger_body">
      <div class="worksheet_trigger_form">
        <div class="form_item" v-for="item in schemaInputs" :key="item.id">
          <template v-if="item.customType === 'selectNode'">
            <div class="form_item_title">{{item.title}}</div>
            <a-select v-model="inputs[item.key]" style="width: 100%" @change="handleNodeChange">
                <a-select-option v-for="out in output" :key="out.nodeId" :value="out.nodeId">
                {{out.nodeName}}
                </a-select-option>
            </a-select>
          </template>
          <template v-if="item.customType === 'updateRow'">
            <div class="form_item_title">{{item.title}}</div>
            <div v-for="field in fieldList" :key="field.name">
              <workflow-input v-model="formData[field.name]" :field="field" :output="output" :data_obj="formStoreData[field.name].data_obj" :formStoreData="formStoreData" :field_name="field.name" @change="handleNoticeChange" v-if="field.dataType === DataType.TEXT || field.dataType === DataType.TEXT_AREA 
              || field.dataType === DataType.RICH_TEXT || field.dataType === DataType.UPLOAD_IMG || field.dataType===DataType.UPLOAD_FILE"></workflow-input>
              <workflow-input-number v-model="formData[field.name]" :field="field" :output="output" v-if="field.dataType === DataType.NUMBER"></workflow-input-number>
              <workflow-selected v-model="formData[field.name]" :field="field" :output="output" v-if="field.dataType === DataType.SELECT || field.dataType === DataType.RADIO"></workflow-selected>
              <workflow-date v-model="formData[field.name]" :field="field" :output="output" v-if="field.dataType === DataType.DATE"></workflow-date>
            </div>
          </template>
        </div>
      </div>
      <div class="worksheet_trigger_foot">
        <a-button type="primary" @click="save">
          保存
        </a-button>
        <a-button @click="cancel">
          取消
        </a-button>
      </div>
    </div>
  </a-drawer>
</template>
<script>
import {uuid} from "@/utils/utils"
import {getNodeOutput} from "@/api/appWorkflow"
import WorkflowDate from "../../workflowDate.vue"
import WorkflowSelected from "../../workflowSelected.vue"
import WorkflowInput from "../../workflowInput.vue"
import WorkflowInputNumber from "../../workflowInputNumber.vue"
import {DataType} from '@/filterConstant'
export default {
  components: {
    WorkflowInput,
    WorkflowInputNumber,
    WorkflowDate,
    WorkflowSelected
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    node: {
      type: Object,
      default: undefined
    }
  },
  data(){
      return {
        DataType,
        schemaInputs: [],
        fieldList: [],
        inputs:{},
        formData:{},
        title: '',
        data_obj: {},
        noticeStoreData: '',
        formStoreData: {}
      }
  },
  watch: {
    dialog: {
      async handler (val) {
        if(this.dialog){
          this.title = this.node?.name || '更新记录'
          let output = await getNodeOutput({
            automationId: this.id,
            nodeId: this.node.nodeId
          })
          
          this.output = output
          let schemaInputs = this.node?.schema?.inputs || {}
          this.inputs = this.node?.inputs || {}
          this.data_obj = this.inputs?.data_obj || {}
          this.formData = this.inputs.row || {}
          let nodeId = this.inputs.nodeId
          if(nodeId){
            let node = this.output.find(o => o.nodeId === nodeId)
            if(node){
                this.fieldList = node.outputs
            }
          }
          if(JSON.stringify(this.node.inputs.formStoreData)!="{}"){
            this.formStoreData = this.node.inputs.formStoreData
          }else{
            for(let item of this.fieldList){
              this.formStoreData = {...this.formStoreData, [item.name]: {msg: '', noticeStoreData: '', data_obj: {}}}
            }
          }
          this.noticeStoreData = this.inputs.noticeStoreData
          this.schemaInputs = schemaInputs.order.map(o => {
            for (const key in schemaInputs.properties) {
              if(key === o){
                return {
                  ...schemaInputs.properties[key],
                  id: uuid(),
                  key
                }
              }
            }
          })
        }
      },
      deep: true,
    },
  },
  methods: {
    handleNoticeChange(value, data, data_obj, field_name) {
      if(this.formStoreData[field_name]){
        this.formStoreData[field_name].msg = data
        this.formStoreData[field_name].noticeStoreData = value
        if(JSON.stringify(data_obj) != "{}"){
          this.formStoreData[field_name].data_obj = data_obj
        }
      }
    },
    handleNodeChange(value){
        let node = this.output.find(o => o.nodeId === value)
        if(node){
            this.formData = {}
            this.fieldList = node.outputs
        }
        for(let item of this.fieldList){
          this.formStoreData = {...this.formStoreData, [item.name]: {msg: '', noticeStoreData: '', data_obj: {}}}
        }
    },
    cancel () {
      this.$emit('close')
    },
    async save(){
      this.inputs.row = this.formData
      this.inputs.formStoreData = this.formStoreData
      this.$emit('close')
      this.$emit('setProperties', {
        inputs: this.inputs
      }, this.title)
    }
  },
  computed:{
    appId(){
      return this.$route.params.appId
    },
    id(){
        return this.$route.params.id
    }
  }
}
</script>

<style scoped>
.form_item{
  margin-top: 10px;
  margin-bottom: 20px;
}
.form_item_title{
  /* font-size: 18px; */
  /* font-weight: bold; */
  color: #000000;
  margin: 15px 0 5px 0;
}
.change_btn{
  position: absolute;
  top: 10px;
  left: 15px;
  border: none;
  height: 35px;
  width: 400px;
  font-size: 17px;
  padding-left: 10px;
  background-color: #FF943E;
}
.change_btn:hover{
  background-color: #f5aa6d;
}
.change_btn:focus{
  background-color: white;
}
</style>